<template>
  <div style="height: 1000px">
    <!--    登录栏-->
    <top-bar></top-bar>
    <!--    导航栏-->
    <el-row class="nav-bar">
      <div :class="{'fixed-box':isFixedBox}">
        <el-card :class="{'nav-bar-card':isNavBarCard}">
          <el-col :md="{span:5,offset:3}" :xs="{span:16}">
            <img
              class="logo"
              src="../../assets/logo.jpg" alt="">
          </el-col>
          <el-col :md="{span:12,offset:0}" class="hidden-sm-and-down">
            <Menu direction="horizontal"></Menu>
          </el-col>
          <el-col :md="{span:4,offset:0}" class="hidden-sm-and-down">
            <vue-particles
              style="margin-top: 10px"
              color="#dedede"
              :particleOpacity="0.7"
              :particlesNumber="500"
              shapeType="circle"
              :particleSize="4"
              linesColor="#dedede"
              :linesWidth="1"
              :lineLinked="true"
              :lineOpacity="0.4"
              :linesDistance="150"
              :moveSpeed="3"
              :hoverEffect="true"
              hoverMode="grab"
              :clickEffect="true"
              clickMode="push"
            >
            </vue-particles>
          </el-col>
          <el-col :md="{span:4,offset:0}" :xs="{span:8}" class="hidden-sm-and-up" style="position: relative;bottom: 4px">
            <i class="el-icon-caret-right" style="margin-right: 15px;font-size: 30px;color: #909399"></i>
            <el-button style="padding: 8px" type="primary"><i class="el-icon-s-fold" @click="showMenuDraw"
                                                              style="font-size: 25px"></i></el-button>
          </el-col>
        </el-card>
      </div>
    </el-row>
    <!--    轮播区-->
    <swiper :swiperList="swiperList" :swiperWidth="swiperWidth"></swiper>
    <!--    菜单弹出框-->
    <el-drawer
      size="100%"
      title="我是标题"
      :visible.sync="isMenuDrawer"
      :with-header="false">
      <div
        class="menu-draw"
      >
        <el-button type="success" icon="el-icon-close" circle class="btnClose" @click="btnClose"></el-button>
        <Menu direction="vertical"></Menu>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Menu from '../../common/Menu'
import TopBar from './TopBar'
import Swiper from './Swiper'

export default {
  name: 'index',
  data () {
    return {
      swiperList: [{
        id: '0001',
        imgUrl: 'https://bpic.588ku.com//back_origin_min_pic/20/05/18/47dd52d76269bc2fcdbf574643aec8fb.jpg!/fw/750/quality/99/unsharp/true/compress/true'
      }, {
        id: '0002',
        imgUrl: 'https://bpic.588ku.com//back_origin_min_pic/20/04/18/8657fb19725e3ba8dd446d69c2b090da.jpg!/fw/750/quality/99/unsharp/true/compress/true'
      }, {
        id: '0003',
        imgUrl: 'https://bpic.588ku.com/back_list_pic/19/04/12/b680683da6caafc11a34f933c93f617f.jpg!/fw/822.85714285714/quality/90/unsharp/true/compress/true'
      }, {
        id: '0004',
        imgUrl: 'https://bpic.588ku.com/back_list_pic/19/07/03/d5d525974c71fe2193bdac6bb5fab7ec.jpg!/fw/822.85714285714/quality/90/unsharp/true/compress/true'
      }],
      isMenuDrawer: false,
      isNavBarCard: false,
      isFixedBox: true,
      swiperWidth: 550
    }
  },
  methods: {
    // 小屏时，显示菜单框
    showMenuDraw () {
      this.isMenuDrawer = true
    },
    // 小屏时，隐藏菜单框
    btnClose () {
      this.isMenuDrawer = false
    },
    handleScroll: function () {
      var top = document.documentElement.scrollTop
      if (top > 60) {
        this.isNavBarCard = true
        this.isFixedBox = true
      } else {
        this.isNavBarCard = false
        this.isFixedBox = false
      }
    },
    handleWidth () {
      const width = document.body.clientWidth
      if (width < 960) {
        this.swiperWidth = 120
      }
      console.log('width', width)
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    window.addEventListener('resize', this.handleWidth)
  },
  components: {
    Menu,
    TopBar,
    Swiper
  }
}
</script>
<style lang="stylus" scoped>
  .nav-bar {
    line-height 55px

    .logo {
      border-radius: 50%
      margin-left 15px
    }

    .nav-bar-card {
      position fixed
      top 0
      z-index 2
      width 100%
    }

    .fixed-box {
      height 200px
    }
  }

  .el-menu {
    margin-top 40px
  }

  .menu-draw {
    height 100%
    padding 40px 40px

    .btnClose {
      position: absolute
      right: 40px
    }
  }

  @media all and (max-width: 960px) {
    .nav-bar {
      line-height 5px

      .logo {
        width 50px
        position relative
        bottom 8px
      }

      .fixed-box {
        height 70px
      }
    }
    .el-menu {
      margin-top 60px
    }
  }
</style>
